<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/shipCenter/receivableSettlementObject">应收结算对象</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>查看应收结算对象</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div style="margin:24px;">
      <a-card>
        <div class="card-title hasContent">基础信息</div>
        <div class="row">
          <div class="headerContent hent">
            <detail-list :col="2" class="detail-layout">
              <detail-list-item :term="isCompany?'公司名称':'名字'">{{detail.name}}</detail-list-item>
              <detail-list-item :term="isCompany?'统一信用代码':'身份证'">{{detail.identityCard}}</detail-list-item>
              <detail-list-item v-if="isCompany" term="联系人">{{detail.linkMan1}}</detail-list-item>
              <detail-list-item term="联系电话">{{detail.linkManPhone1}}</detail-list-item>
              <detail-list-item v-if="isCompany" term="联系人2">{{detail.linkMan2}}</detail-list-item>
              <detail-list-item v-if="isCompany" term="联系电话2">{{detail.linkManPhone2}}</detail-list-item>
              <detail-list-item v-if="isCompany" term="公司地址">{{detail.address}}</detail-list-item>
              <detail-list-item v-if="isCompany" term="公司电话">{{detail.phone}}</detail-list-item>
            </detail-list>
            <detail-list :col="2" class="detail-layout">
              <detail-list-item v-if="isCompany" term="营业执照">
                <img
                  class="previewImageClass"
                  :src="detail.businessLicensePic"
                  @click="previewImageModal(detail.businessLicensePic)"
                />
              </detail-list-item>
              <detail-list-item v-if="isCompany" term="开户许可证">
                <div v-if="!detail.accountOpenLicensePic" class="zEmptyPic"></div>
                <img
                  v-if="detail.accountOpenLicensePic"
                  class="previewImageClass"
                  :src="detail.accountOpenLicensePic"
                  @click="previewImageModal(detail.accountOpenLicensePic)"
                />
              </detail-list-item>
            </detail-list>
          </div>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">开票及结算信息</div>
        <div class="row">
          <div class="headerContent hent1">
            <detail-list :col="1" class="detail-layout">
              <detail-list-item term="结算类型">{{settlementTypeStr}}</detail-list-item>
              <detail-list-item term="账期">{{detail.custInfoSettlement.paymentDays}}</detail-list-item>
            </detail-list>
          </div>
          <a-col :span="23" style="margin-left:3%;">
            <h3 style="fontWeight:bold; display:inline-block;marginRight:24px">银行卡信息</h3>
            <div id="banks">
              <bank-card-list :list="detail.custInfoBankCardList" :view="true" />
            </div>
          </a-col>
        </div>
      </a-card>

      <a-card>
        <div class="card-title hasContent">合同信息</div>
        <a-row style="margin-left:3%;">
          <a-col :span="23">
            <a-list>
              <a-list-item v-for="(ag, index) in this.detail.custInfoContractList" :key="index">
                <a-icon type="link" :style="{color: getColor(ag.beginTime, ag.endTime)}" />
                合同有效期：{{ag.beginTime}} ~ {{ag.endTime}}
                <a @click="checkAgreement(index)">查看</a>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </a-card>
    </div>

    <agreement-view-modal
      v-if="isCompany"
      :visible="agreementViewVisible"
      :agreement="custInfoContract"
      @set-agview-visible="setAgreementViewVisible"
    />
    <preview-img-modal v-if="previewImage && isCompany" :src="previewImage" @clear-src="clearSrc" />
  </div>
</template>

<script>
import { mixin } from '@/common/common'
import { getCustomerById } from '@/api'
import agreementViewModal from '@/page/landCenter/agreementViewModal'
import bankCardList from '@/page/landCenter/bankCardList'
import DetailList from '@/components/DescriptionList'

const DetailListItem = DetailList.Item

export default {
  props: ['id'],
  mixins: [mixin],
  data () {
    return {
      previewImage: null,
      detail: {
        name: '', // 公司名称
        identityCard: '', // 统一信用代码
        linkMan1: '', // 联系人1
        linkManPhone1: '', // 联系电话1
        linkMan2: '', // 联系人2
        linkManPhone2: '', // 联系电话2
        address: '', // 地址
        businessLicensePic: '', // 营业执照图
        accountOpenLicensePic: '', // 开户许可证
        custInfoSettlement: {
          settlementType: 1, // 结算方式：1票结，2月结
          paymentDays: '' // 账期
        },
        custInfoBankCardList: [],
        custInfoContractList: [],
        userName: ''
      },
      agreementViewVisible: false,
      custInfoContract: {
        name: '',
        beginTime: '',
        endTime: '',
        pictures: ''
      }
    }
  },
  components: {
    DetailList,
    DetailListItem,
    [bankCardList.name]: bankCardList,
    [agreementViewModal.name]: agreementViewModal
  },
  created () {
    const id = this.id
    const custType = 'RECEIVABLE_SUPPLIER'
    if (id) {
      getCustomerById({ id, custType }).then(rsp => {
        this.detail = Object.assign({}, this.detail, rsp.data)
      })
    }
  },
  computed: {
    isCompany () {
      return this.detail.isCompany === 1
    },
    settlementTypeStr () {
      return this.checkSettlementTypeName(this.detail.custInfoSettlement.settlementType)
    }
  },
  methods: {
    getColor (beginTime, endTime) {
      const isOver = new Date(`${endTime} 23:59:59`).getTime() < new Date().getTime() || new Date(`${beginTime}`).getTime() > new Date().getTime()
      return isOver ? 'grey' : '#1890ff'
    },
    checkAgreement (index) {
      this.agreementViewVisible = true
      this.custInfoContract = Object.assign({}, this.detail.custInfoContractList[index])
    },
    setAgreementViewVisible (visible) {
      this.agreementViewVisible = visible
    },
    previewImageModal (src) {
      this.previewImage = src
    },
    clearSrc () {
      this.previewImage = null
    }
  }
}
</script>

<style lang="less" scoped>
.headerContent {
  flex: auto;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;

  .link {
    margin-top: 16px;
    line-height: 24px;

    a {
      font-size: 14px;
      margin-right: 32px;
    }
  }
}

.ant-card {
  position: relative;
  margin-bottom: 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    &:before {
      content: '';
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}
</style>
<style lang="less">
.hent1 .term {
  float: left;
  width: 10%;
  line-height: 30px !important;
  margin-right: 0 !important;
}
.hent1 .content {
  line-height: 30px !important;
}
.hent .term {
  float: left;
  width: 40%;
  line-height: 30px !important;
  margin-right: 0 !important;
}
.hent .content {
  line-height: 30px !important;
}
</style>
